<template>
  <div class="titlebar-container">
    <div class="title">{{title}}</div>
    <div class="window-control">
      <div class="minimize" @click="handleMinimizeClick">
        <div
          style="position:absolute;left:50%;top:60%;transform:translateX(-50%);width:8px;border-bottom:1px solid white"
        ></div>
      </div>
      <div class="close" @click="handleCloseClick">
        <div class="close-line" style=" transform: translateX(-50%) rotate(45deg)"></div>
        <div class="close-line" style=" transform: translateX(-50%) rotate(-45deg)"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class TitleBar extends Vue {
  @Prop({ default: "AnimeSong Simple Player", type: String })
  private title?: string;
  private handleMinimizeClick() {
    window.ipcRenderer.send("minimize");
  }
  private handleCloseClick() {
    window.ipcRenderer.send("close");
  }
}
</script>

<style lang="scss" scoped>
.titlebar-container {
  height: 30px;
  background: transparent;
  display: flex;
  flex-flow: row nowrap;
  font-size: 18px;
  .title {
    flex: 1;
    line-height: 30px;
    padding: 5px 20px 0 20px;
    user-select: none;
    -webkit-app-region: drag;
  }
  .window-control {
    flex-basis: 90px;
    display: flex;
    flex-flow: row nowrap;
    .minimize {
      flex: 1;
      position: relative;
      &:hover {
        background: darkgray;
      }
      &:active {
        background: rgb(222,222,222);
      }
    }
    .close {
      flex: 1;
      position: relative;
      &:hover {
        background: rgb(255, 50, 50);
      }
      &:active {
        background: rgb(255, 0, 0);
      }
      .close-line {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        border-bottom: 1px solid white;
      }
      &:hover .close-line {
        border-color: white;
      }
    }
  }
}
</style>